<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    /* 事件流：指的是事件完整执行过程中的流动路径
    --捕获阶段：从父到子（从大到小）
    --冒泡阶段：从子到父（从小到大）
    实际工作都是使用 冒泡事件 */

    // 一、事件捕获：从DOM的根元素开始去执行对应的事件（从外到里）（从大到小）(从父到子)
    // 语法--DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
    // 说明：
    // > addEventListener第三个参数传入true代表的是捕获阶段触发（很少使用）
    // > 若传入false代表冒泡阶段触发，默认就是false
    // > 若是用LO事件监听,则只有冒泡阶段,没有捕获
    /*
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click', function () {
      alert('我是爷爷')  //只显示'我是爷爷'
    }, true)
    fa.addEventListener('click', function () {
      alert('我是爸爸')  //先显示'我是爷爷',再显示'我是爸爸'
    }, true)
    son.addEventListener('click', function () {
      alert('我是儿子')  //先显示'我是爷爷',再显示'我是爸爸',最后显示'我是儿子'
    }, true)
    */


    // 二、事件冒泡：当一个元素的事件被触发时，同样的事件将会在
    // 该元素的祖先元素中依次被触发。这一过程被称为事件冒泡（从里到外）（从子到父）（从小到大）
    // > 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
    // > 语法--DOM.addEventListener(事件类型, 事件处理函数)  所以事件冒泡是默认存在的
    // > L2事件监听第三个参数是false，或者默认都是冒泡
    /*
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click', function () {
      alert('我是爷爷')  //只显示'我是爷爷'
    })
    fa.addEventListener('click', function () {
      alert('我是爸爸')  //先显示'我是爸爸',再显示'我是爷爷'
    })
    son.addEventListener('click', function () {
      alert('我是儿子')  //先显示'我是儿子',再显示'我是爸爸',最后显示'我是爷爷'
    })
    */


    // 三、阻止事件冒泡：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
    // --需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
    // --前提：阻止事件冒泡需要拿到事件对象
    // --语法：事件对象.stopPropagation()
    // -----注意：此方法可以阻止事件流动传播（阻止事件流），不光在冒泡阶段有效，捕获阶段也有效
    const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    document.addEventListener('click', function () {
      alert('我是爷爷')  //只显示'我是爷爷'
    })
    fa.addEventListener('click', function (e) {
      alert('我是爸爸')  //先显示'我是爸爸',再显示'我是爷爷'
      e.stopPropagation()  //只显示'我是爸爸'
    })
    son.addEventListener('click', function (e) {
      alert('我是儿子')  //先显示'我是儿子',再显示'我是爸爸',最后显示'我是爷爷'
      // 阻止流动传播，必须要用到事件对象
      e.stopPropagation()  //只显示'我是儿子'
    })
  </script>
</body>

</html>